html {
	font-size: 48px;

	--iphone-black-bg: #000;
	--iphone-black-text: #f2f2f2;

	--iphone-white-bg: #fff;
	--iphone-white-text: #8b8b99;
	--iphone-white-text-highlight: #1d1d1f;

	--iphone-red-bg: #960b19;
	--iphone-red-text: #e57571;
	--iphone-red-text-highlight: #f5f5f7;

	--iphone-width: 460px;
	--iphone-offscreen: -720px;
}

body {
	margin: 0;
	height: 4000px;
	font-family: Helvetica;
	background-color: #000;
}

.sticky-container {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.sticky-container .iphone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}

.sticky-container .iphone h3 {
	font-size: 1rem;
	margin: 0 0 60px 0;
	width: var(--iphone-width);
}

.sticky-container .iphone img {
	display: block;
	width: var(--iphone-width);
	margin-bottom: var(--iphone-offscreen);
}

.sticky-container .iphone.black {
	background-color: var(--iphone-black-bg);
	z-index: 10;
}

.sticky-container .iphone.black h3 {
	color: var(--iphone-black-text);
}

.sticky-container .iphone.white {
	background-color: var(--iphone-white-bg);
	z-index: 20;

	clip-path: inset(100% 0px 0px 0px);
}

.sticky-container .iphone.white h3 {
	color: var(--iphone-white-text);
}

.sticky-container .iphone.white h3 span {
	color: var(--iphone-white-text-highlight);
}

.sticky-container .iphone.red {
	background-color: var(--iphone-red-bg);
	z-index: 30;

	clip-path: inset(100% 0px 0px 0px);
}

.sticky-container .iphone.red h3 {
	color: var(--iphone-red-text);
}

.sticky-container .iphone.red h3 span {
	color: var(--iphone-red-text-highlight);
}

.sticky-container.no-sticky {
	position: relative;
	overflow: visible;
}

.sticky-container.no-sticky .iphone {
	position: relative;
}

.sticky-container.no-sticky .iphone.red {
	padding-bottom: calc(var(--iphone-offscreen) * -1);
}
